<template>
    <view>
        <view class="bg"></view>
        <view class="content">
            <view class="nav">
                <view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">周榜</view>
                <view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">月榜</view>
            </view>
            
            <view class="top" v-if="list && list.length > 0">
                <!-- 第二名 -->
                <view class="t-box">
                    <image :src="IMAGEURL + 'static/image/img_11.png'" class="img-11"></image>
                    <view class="t-info">
                        <image v-if="list[1]&&list[1].image" :src="list[1].image" class="t-avatar"></image>
                        <image v-else :src="IMAGEURL + 'static/icon/avatar.png'" class="t-avatar"></image>
                        <view class="top-name">{{ list[1].name || '暂无' }}</view>
                        <view class="top-xj">星级</view>
                        <view class="star">
                            <u-icon name="star-fill" color="#fec427" size="30"></u-icon>
                            <view class="star-num">{{ list[1].star || 0 }}</view>
                        </view>
                    </view>
                </view>
                <!-- 第一名 -->
                <view class="o-box">
                    <image :src="IMAGEURL + 'static/image/img_10.png'" class="img-10"></image>
                    <view class="o-info">
                        <image v-if="list[0]&&list[0].image" :src="list[0].image" class="o-avatar"></image>
                        <image v-else :src="IMAGEURL + 'static/icon/avatar.png'" class="o-avatar"></image>
                        <view class="top-name">{{ list[0].name || '暂无' }}</view>
                        <view class="top-xj">星级</view>
                        <view class="star">
                            <u-icon name="star-fill" color="#fec427" size="30"></u-icon>
                            <view class="star-num">{{ list[0].star || 0 }}</view>
                        </view>
                    </view>
                </view>
                <!-- 第三名 -->
                <view class="th-box">
                    <image :src="IMAGEURL + 'static/image/img_12.png'" class="img-12"></image>
                    <view class="th-info">
                        <image v-if="list[2]&&list[2].image" :src="list[2].image" class="th-avatar"></image>
                        <image v-else :src="IMAGEURL + 'static/icon/avatar.png'" class="th-avatar"></image>
                        <view class="top-name">{{ list[2].name || '暂无' }}</view>
                        <view class="top-xj">星级</view>
                        <view class="star">
                            <u-icon name="star-fill" color="#fec427" size="30"></u-icon>
                            <view class="star-num">{{ list[2].star || 0 }}</view>
                        </view>
                    </view>
                </view>
            </view>
            
            <template v-if="list && list.length > 3">
                <view class="other">
                    <view class="rank">排名</view>
                    <view class="user">用户昵称</view>
                    <view class="level">星级</view>
                </view>
                <view class="item" v-for="(item, index) in list" :key="index" v-if="index > 2">
                    <view class="rank-i">{{ index + 4 }}</view>
                    <view class="user-i">
                        <image :src="item.image" class="img"></image>
                        <view class="item-name">{{item.name}}</view>
                    </view>
                    <view class="level-i">{{item.star}}</view>
                </view>
            </template>
            
            <view style="text-align: center;padding: 50upx 0;color: #999;font-size: 24rpx;" v-if="list.length == 0">暂无相关信息</view>
        </view>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                IMAGEURL,
                type: 1, //1周榜 2月榜
                list: [],
            };
        },
        onLoad() {
            this.getList()
        },
        methods: {
            chooseNav(num) {
                if (this.type == num) return
                this.type = num
                this.getList()
            },
            
            getList() {
            	this.$ajax('excellent_partner', {
            		user_token: this.$getSync('userToken'),
                    type: this.type,//1周 2月
            	}).then(ret => {
            		if (ret.success == 1000) {
                        this.list = ret.detail.service_staff
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #ffffff;
    }
    .bg {
    	width: 100%;
    	height: 390rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #fff2c2, #ffffff);
    }
    
    .content{
        padding: 30rpx;
    }
    .nav{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 250rpx;
        height: 64rpx;
        background-color: #ffcc31;
        border-radius: 50rpx;
        margin: 0 auto 25rpx;
    }
    .nav-i{
        width: calc(250rpx / 2);
        font-size: 28rpx;
        text-align: center;
        line-height: 1;
    }
    .active{
        width: calc(240rpx / 2);
        height: 60rpx;
        background-color: #fff;
        border-radius: 50rpx;
        font-size: 30rpx;
        font-weight: bold;
        line-height: 60rpx;
    }
    
    .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 100rpx;
    }
    .t-box{
        position: relative;
    }
    .img-11{
        width: 229rpx;
        height: 262rpx;
    }
    .t-info{
        position: absolute;
        left: 10rpx;
        bottom: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #24578b;
    }
    .t-avatar{
        width: 97rpx;
        height: 97rpx;
        border: 4rpx solid #53c4ff;
        border-radius: 50%;
    }
    .top-name{
        font-size: 34rpx;
        text-align: center;
        width: 210rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-top: 80rpx;
    }
    .t-color{
        color: #24578b;
    }
    .o-color{
        color: #d95b01;
    }
    .th-color{
        color: #d7713b;
    }
    .top-xj{
        font-size: 22rpx;
        padding-top: 30rpx;
    }
    .star{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 7rpx;
    }
    .star-num{
        font-size: 34rpx;
        color: #000;
        line-height: 1;
        padding-left: 5rpx;
    }
    
    .o-box{
        position: relative;
    }
    .img-10{
        width: 228rpx;
        height: 309rpx;
    }
    .o-info{
        position: absolute;
        left: 10rpx;
        bottom: 68rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #d95b01;
    }
    .o-avatar{
        width: 109rpx;
        height: 109rpx;
        border: 4rpx solid #fea223;
        border-radius: 50%;
    }
    
    .th-box{
        position: relative;
    }
    .img-12{
        width: 229rpx;
        height: 262rpx;
    }
    .th-info{
        position: absolute;
        left: 7rpx;
        bottom: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #d7713b;
    }
    .th-avatar{
        width: 97rpx;
        height: 97rpx;
        border: 4rpx solid #ee8653;
        border-radius: 50%;
    }
    
    
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22rpx 0;
    }
    .rank-i{
        width: 75rpx;
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
    }
    .level-i{
        width: 75rpx;
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
    }
    .user-i{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .img{
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }
    .item-name{
        flex: 1;
        font-size: 28rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    
    .other{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 25rpx;
        font-size: 24rpx;
        color: #8c8c8c;
    }
    .rank{
        width: 75rpx;
        text-align: center;
    }
    .user{
        flex: 1;
    }
    .level{
        width: 75rpx;
        text-align: center;
    }
</style>
